<template>
  <div class="app-container">
    <!-- 搜索/过滤区域 -->
    <div class="search-container">
      <div class="">
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="text-left">
              <el-button type="primary" @click="pushEducate">推送宣教</el-button>
              <el-button type="primary" @click="handleFollow">推送随访</el-button>
              <el-button type="primary" @click="handleVisit">复诊提醒</el-button>
              <el-button type="primary" @click="stopVisit">停诊</el-button>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="text-center">
              <el-radio-group v-model="patientStat" style="margin-bottom: 20px;">
                <el-radio-button :label="0">全部(*人)</el-radio-button>
                <el-radio-button :label="1">已问诊(*人)</el-radio-button>
                <el-radio-button :label="2">待诊(*人)</el-radio-button>
                <el-radio-button :label="3">明日患者(*人)</el-radio-button>
              </el-radio-group>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="text-right">

              <el-form :inline="true" size="small" class="search-form">

                <el-form-item label="">
                  <el-select v-model="day" placeholder="今日" clearable style="width: 90px;">
                    <el-option v-for="item in dayList" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>

                <el-form-item label="">
                  <el-select v-model="tag" placeholder="标签分组" clearable style="width: 90px;">
                    <el-option v-for="tag in tags" :label="tag.describe" :value="tag.id" />
                  </el-select>
                </el-form-item>

              </el-form>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="text-right">
              <el-button type="primary" icon="el-icon-search" @click="showMore">更多搜索条件</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-if="showSearch" style="padding: 20px 0;">
        <el-form :inline="true" size="small" class="search-form">
          <el-form-item label="预约时间">
            <date-range-picker v-model="searchForm.bookTime" class="date-item" />
          </el-form-item>
          <el-form-item label="患者证号">
            <el-input v-model="searchForm.idNo" placeholder="请输入" clearable style="width: 200px;" />
          </el-form-item>

          <el-form-item label="标签分组">
            <el-select v-model="searchForm.tag" placeholder="请选择" clearable style="width: 150px;">
              <el-option v-for="tag in tags" :label="tag.describe" :value="tag.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="searchForm.sex" placeholder="请选择" clearable style="width: 70px;">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="searchForm.ageLt" placeholder="年龄低值" clearable style="width: 100px;" />
            -
            <el-input v-model="searchForm.ageGt" placeholder="年龄高值" clearable style="width: 100px;" />
          </el-form-item>

          <el-form-item class="pull-right">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>

    <!-- 数据表格 -->
    <el-table :data="patientList" v-loading="loading" style="width: 100%; margin-bottom: 20px;" border stripe>
      <el-table-column type="selection" width="55" label="序号" />
      <el-table-column prop="patName" label="名称" width="120" />
      <el-table-column prop="sex" label="性别" width="120" />
      <el-table-column prop="age" label="年龄" width="120" />
      <el-table-column prop="patTag" label="标签">
        <template slot-scope="scope">
          <el-tag v-for="tag in scope.row.patTag" size="small" style="margin-right: 5px;">
            {{ tag.tagName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="typeName" label="预约类型" width="120" />
      <el-table-column prop="visitTime" label="预约接诊时间" width="220" />
      <el-table-column prop="isOnline" label="是否在线" width="100" align="center">
      </el-table-column>
      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="handlePat(scope.row)" class="operation-text">接诊</el-button>
          <el-button type="text" @click="setTag(scope.row)" style="color: #F56C6C;"
            class="operation-text">设标签</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 新增/编辑患者标签对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" :before-close="handleTagClose">
      <el-form :rules="rules" ref="nurseForm" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input :value="patientItem.patName" placeholder="请输入姓名" :disabled="true" />
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select v-model="patientItem.tags" multiple placeholder="请选择标签" style="width: 100%;">
            <el-option v-for="tag in tags" :label="tag.describe" :value="tag.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleTagClose">取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </el-dialog>

    <!-- 推送随访对话框 -->
    <el-dialog title="宣教" :visible.sync="educateDdialogVisible" width="600px" :before-close="handleDialogClose">
      <div>
        <div class="educate-item" v-for="item in educate" style="border-bottom: 1px solid #F4F4F4;padding-top: 20px;">
          <el-row>
            <el-col :span="2">
              <div class="grid-content bg-purple-dark">
                <el-checkbox></el-checkbox>
              </div>
            </el-col>
            <el-col :span="14">
              <div class="grid-content bg-purple-dark">
                <div>
                  <div style="font-weight: 400;color: #000;font-size: 16px;padding-right: 10px;">{{ item.name }}</div>
                  <div
                    style="color:#333 ;font-size: 11px;display: flex;padding:20px 20px 20px 0; justify-content: space-between;">
                    <div>点赞 {{ item.likes }}</div>
                    <div>收藏 {{ item.collects }}</div>
                    <div>转发 {{ item.forwards }}</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple-dark">
                <el-image style="width: 100px; height: 60px"
                  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
              </div>
            </el-col>
          </el-row>
        </div>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DateRangePicker from "@/components/DateRangePicker";
import { patientSelect, tagSelect, patInfoSelect } from '@/api/doctor/patient'

export default {
  name: "Patient",
  components: { DateRangePicker },
  data() {
    return {
      // 搜索表单
      searchForm: {
        name: "",
        bookTime: "",
        idNo: "",
        sex: "",
        tags: "",
        ageGt: "",
        ageLt: ""
      },
      dialogTitle: '',
      tags: [],
      patientStat:'0',
      submitLoading: false,
      showSearch:false,
      // 表格数据
      patientList: [],
      day:"",
      tag:"",
            // 快捷日期
      dayList: [{ name: '今日', value: '0' }, { name: '昨日', value: '-1' }, { name: '明日', value: '1' }],
      patientItem: {},
      // 加载状态
      loading: false,
      dialogVisible: false,
      educateDdialogVisible: false,

      educate: [
        {
          name: "全麦、无糖食品，糖尿病到sdasdasd阿迪娜三年多了底应该怎么选择？",
          likes: 389,
          collects: 324,
          forwards: 467
        },
        {
          name: "挂号须知",
          likes: 389,
          collects: 324,
          forwards: 467
        }
      ],

      // 表单验证规则
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        employeeId: [
          { required: true, message: "请输入工号", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        tags: [{ required: true, message: "请选择项目", trigger: "change" }]
      }
    };
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      patientSelect({}).then(res => {
        this.patientList = res
      })
      tagSelect({ code: 'patientTag' }).then(res => {
        this.tags = res
      })
    },
    // 设置标签
    setTag(row) {
      this.dialogTitle = "编辑标签";
      this.patientItem = { ...row };
      this.dialogVisible = true;
    },
  //更多查询条件
    showMore(){
      this.showSearch=!this.showSearch
    },
    //操作患者 到问诊开单页面
    handlePat() {
      this.$router.push({ path: 'consult' })
    },
    // 推送宣教
    pushEducate() {
      this.educateDdialogVisible = true;
    },
    handleTagClose() {
      this.dialogVisible = false;
    },
    // 搜索
    handleSearch() {
      this.loadData();
    },
    //随访
    handleFollow() {

    },
    //复诊
    handleVisit() {

    },
    //停诊
    stopVisit() {

    },
    // 关闭对话框
    handleDialogClose() {
      this.educateDdialogVisible = false
    },
    // 重置搜索
    handleReset() {
      this.searchForm = {
        name: "",
        employeeId: "",
        phone: "",
        tag: "",
        boundUser: ""
      };
      this.handleSearch();
    },
    //导出
    handleExport() {

    },
  },

};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .search-container {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .search-form {
      .el-form-item {
        margin-bottom: 15px;
        margin-right: 20px;
      }
    }
  }

  .operation-container {
    margin-bottom: 20px;
    text-align: right;
  }

  .operation-text {
    font-size: 14px;
  }

  .pagination-container {
    text-align: right;
    margin-top: 20px;
  }

  .text-left {
    text-align: left;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: end;
  }
  .pull-right{
    float: right;
  }

  .el-table {
    .el-button--text {
      padding: 0;
      margin: 0 5px;
    }
  }

  .dialog-footer {
    text-align: right;
  }
}
</style>
